<template>
  <div class="my">
    <div class="title">
      <div class="top w clearfix">
        <p class="fl">周口市专业技术人员继续教育平台</p>
        <p class="fr">
          <span class="spn1" @click="more('personcenter')">个人中心</span>
          <span @click="goback">退出</span>
        </p>
      </div>
    </div>
    <div class="content w clearfix">
      <div class="leftcon fl">
        <div class="top">
          <div class="one">
            <h3>{{name}}</h3>
            <p>
              <span>身份证号:</span>
              <span>{{id_card}}</span>
            </p>
            <p class="ptype" @click="more('changemsg')">个人设置</p>
          </div>
          <div class="two clearfix">
            <div class="left fl">
              <p class="p1">
                <img src="../assets/canjia01.png" alt />
              </p>
              <p class="p3">公需课</p>
            </div>
            <div class="line fl"></div>
            <div class="right fl" v-show="data.length>0" v-for="(item,index) in data" :key="index">
              <p class="p2">
                <span>可用学时:</span>
                <span class="spn">{{item.keyong_gongxuke_xueshi_num}}</span>
              </p>
              <p>
                <span>已获学时:</span>
                <span class="spn">{{item.get_gongxuke_xueshi_num}}</span>
              </p>
            </div>
            <div class="right fl" v-show="!data.length">
              <p class="p2">
                <span>可用学时:</span>
                <span class="spn">0</span>
              </p>
              <p>
                <span>已获学时:</span>
                <span class="spn">0</span>
              </p>
            </div>
          </div>
          <div class="two clearfix">
            <div class="left fl">
              <p class="p1">
                <img src="../assets/canjia02.png" alt />
              </p>
              <p class="p3">专业课</p>
            </div>
            <div class="line fl"></div>
            <div class="right fl" v-show="data.length>0" v-for="(item,index) in data" :key="index">
              <p class="p2">
                <span>可用学时:</span>
                <span class="spn">{{item.keyong_zhuanyeke_xueshi_num}}</span>
              </p>
              <p>
                <span>已获学时:</span>
                <span class="spn">{{item.get_zhuanyeke_xueshi_num}}</span>
              </p>
            </div>
            <div class="right fl" v-show="!data.length">
              <p class="p2">
                <span>可用学时:</span>
                <span class="spn">0</span>
              </p>
              <p>
                <span>已获学时:</span>
                <span class="spn">0</span>
              </p>
            </div>
          </div>
        </div>
        <div class="leftbot">
          <ul>
            <li :class="{active:bgcolor=='allCourses'}" @click="more('allCourses')">
              <!-- <i class="iconfont icon-file"></i> -->
              <img src="../assets/timefill.png" alt="" v-if="bgcolor=='allCourses'">
              <img src="../assets/time.png" alt="" v-else>
              <span>全部课程</span>
              <i class="iconfont icon-right fr"></i>
            </li>
            <li :class="{active:bgcolor=='mypackage'}" @click="more('mypackage')">
              <!-- <i class="iconfont icon-shop"></i> -->
              <img src="../assets/workbenchfill.png" alt="" v-if="bgcolor=='mypackage'">
              <img src="../assets/workbench.png" alt="" v-else>
              <span>课程包</span>
              <i class="iconfont icon-right fr"></i>
            </li>
            <li :class="{active:bgcolor=='mykecheng'}" @click="more('mykecheng')">
              <!-- <i class="iconfont icon-vipcard"></i> -->
                <img src="../assets/createtaskfill.png" alt="" v-if="bgcolor=='mykecheng'">
              <img src="../assets/createtask.png" alt="" v-else>
              <span>我的课程</span>
              <i class="iconfont icon-right fr"></i>
            </li>
            <li :class="{active:bgcolor=='examination'}" @click="more('examination')">
              <!-- <i class="iconfont icon-edit_light"></i> -->
                <img src="../assets/kaoshiill.png" alt="" v-if="bgcolor=='examination'">
              <img src="../assets/kaoshi.png" alt="" v-else>
              <span>参加考试</span>
              <i class="iconfont icon-right fr"></i>
            </li>
            <li :class="{active:bgcolor=='examrecord'}" @click="more('examrecord')">
              <!-- <i class="iconfont icon-text"></i> -->
                <img src="../assets/taskfill.png" alt="" v-if="bgcolor=='examrecord'">
              <img src="../assets/task.png" alt="" v-else>
              <span>考试记录</span>
              <i class="iconfont icon-right fr"></i>
            </li>
            <li :class="{active:bgcolor=='archives'}" @click="more('archives')">
              <!-- <i class="iconfont icon-news_light"></i> -->
                <img src="../assets/businesscardfill.png" alt="" v-if="bgcolor=='archives'">
              <img src="../assets/businesscard.png" alt="" v-else>
              <span>档案记录</span>
              <i class="iconfont icon-right fr"></i>
            </li>
            <li :class="{active:bgcolor=='allOrder'}" @click="more('allOrder')">
              <!-- <i class="iconfont icon-calendar"></i> -->
                <img src="../assets/activityfill.png" alt="" v-if="bgcolor=='allOrder'">
              <img src="../assets/activity.png" alt="" v-else>
              <span>我的订单</span>
              <i class="iconfont icon-right fr"></i>
            </li>
          </ul>
        </div>
      </div>
      <component :is="componentId" class="fl" @more="more"></component>
    </div>
    <comfoot></comfoot>
  </div>
</template>

<script>
import qs from "qs";
import examination from "../components/examination";
import personcenter from "../components/personcenter";
import mypackage from "../components/mypackage";
import examrecord from "../components/examrecord";
import archives from "../components/archives";
import allCourses from "../components/allCourses";
import mykecheng from "../components/mykecheng";
import allOrder from "../components/allOrder";
import changemsg from "../components/changemsg";
import comfoot from "../components/footer";
export default {
  name: "my",
  data() {
    return {
      componentId: "personcenter",
      bgcolor: "",
      name: localStorage.getItem("name"),
      year: "",
      data: [],
      id_card: localStorage.getItem("id_card"),
      uid: localStorage.getItem("uid"),
      token: localStorage.getItem("token"),
      apiurl: "http://jixujiaoyu_api.songlongfei.club:1012"
    };
  },
  watch: {
    token: {
      handler: function(val) {
        if (val) {
        } else {
          this.clearlocalData();
        }
      }
    },
    deep: true
  },
  created() {
    if (localStorage.getItem("token")) {
      var date = new Date();
      this.year = date.getFullYear();
      var leng = this.id_card.length;
      this.id_card =
        this.id_card.substr(0, 3) + "****" + this.id_card.substr(leng - 4);
      if (sessionStorage.getItem("types")) {
        this.more(sessionStorage.getItem("types"));
      }
      this.getxueshinum();
    } else {
      this.clearlocalData();
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vv => {
      if (from.name == "login") {
        vv.more("personcenter");
      }
    });
  },
  methods: {
    more(val) {
      this.componentId = val;
      this.bgcolor = val;
      sessionStorage.setItem("types", this.componentId);
    },
    //获取学时
    getxueshinum() {
      var that = this;
      this.$axios
        .post(
          "http://jixujiaoyu_api.songlongfei.club:1012/dangan/get_user_year_xueshi",
          qs.stringify({
            uid: this.uid,
            token: this.token,
            year: this.year
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.status == "ok") {
            // that.name=res.data.data[0].name
            // that.id_card=res.data.data[0].id_card
            that.data = res.data.data;
          }
        });
    },
    //返回按钮
    goback() {
      var that = this;
      this.$axios
        .post(
          this.apiurl + "/user/logout",
          qs.stringify({
            uid: this.uid,
            token: this.token
          })
        )
        .then(res => {
          that.$message.success({ message: "退出成功", duration: 1600 });
          that.clearlocalData();
        });
    },
    //状态为relogin时清除local数据
    clearlocalData (){
      let that = this;
      localStorage.removeItem("login1");
      localStorage.removeItem("uid");
      localStorage.removeItem("token");
      localStorage.removeItem("sex");
      localStorage.removeItem("name");
      localStorage.removeItem("mobile");
      localStorage.removeItem("id_card");
       that.$router.push({ path: "/index" });
      // setTimeout(() => {
       
      // }, 1600);
    }
  },
  components: {
    examination,
    personcenter,
    mypackage,
    examrecord,
    archives,
    allCourses,
    mykecheng,
    allOrder,
    changemsg,
    comfoot
  }
};
</script>

<style lang="less" scoped>
@family: AlibabaPuHuiTiR;
@family1: MicrosoftYaHei;
.my {
  width: 100%;
  height: 100%;
  .w {
    width: 1200px;
    margin: 0 auto;
  }
  .title {
    width: 100%;
    height: 72px;
    line-height: 72px;
    background-color: #0169cc;
    color: #fff;
    font-size: 28px;
    letter-spacing: 2px;
    cursor: pointer;
    .fr {
      font-size: 16px;
      .spn1 {
        margin-right: 45px;
      }
    }
  }
  .content {
    font-size: 14px;
    margin-top: 20px;
    min-height: 680px;
    .leftcon {
      width: 242px;
      margin-right: 10px;

      .top {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        cursor: default;
        .one {
          width: 100%;
          margin: 0 auto;
          box-sizing: border-box;
          background-color: #e1f1ff;
          padding-bottom: 20px;
          box-sizing: border-box;
          h3 {
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 18px;
            padding-top: 28px;
          }
          .ptype {
            width: 142px;
            height: 40px;
            border-radius: 40px;
            border: 1px solid #51a3ef;
            line-height: 40px;
            margin: 0 auto;
            margin-top: 20px;
            color: #51a3ef;
            cursor: pointer;
          }
        }
        .two {
          margin-top: 2px;
          background-color: #e1f1ff;
          width: 100%;
          padding: 24px 0 16px;
          box-sizing: border-box;
          cursor: default;
          .left {
            width: 40%;
          }
          .right {
            width: 58%;
          }
          .line {
            width: 2px;
            height: 50px;
            background-color: #ffff;
          }
          p {
            color: #333;
            &.p1 {
              margin-bottom: 3px;
            }
            &.p2 {
              margin-bottom: 5px;
            }
            .spn {
              font-weight: bold;
              margin-left: 5px;
              color: #51a3ef;
            }
            &.p3 {
              font-weight: bold;
            }
          }
        }
      }
      .leftbot {
        width: 100%;
        background-color: #fff;
        ul {
          width: 100%;
          padding: 20px 0;
          box-sizing: border-box;
          li {
            width: 100%;
            height: 45px;
            line-height: 45px;
            font-family: @family;
            font-size: 16px;
            color: #1a1a1a;
            letter-spacing: 1px;
            padding: 0 20px;
            box-sizing: border-box;
            cursor: pointer;
            i.fl {
              margin-right: 20px;
              font-size: 20px;
            }
            &.active {
              color: #138bef;
            }
          }
        }
      }
    }
    // 右侧内容
  }
}
</style>
